<template>
	<scroll-view scroll-y>
		<!-- 说明模态框 -->
		<u-modal v-model="show" title="数据说明">
			<view class="modal_content">
				<text>1.中国疫苗发布数据来自于国家卫健委发布。</text>
				<br/>
				<text>2.数据口径为接种剂次，而非接种人数。目前上市疫苗均需接种两个剂次。</text>
			</view>
		</u-modal>
		<view class="head">
			<view class="head_left">
				实时接种数据
			</view>
			<view class="head_right" @click="handleExplain">
				数据说明
					<u-icon name="question-circle"></u-icon>
			</view>
		</view>
		<view class="wrap">
			<u-row gutter="10" justify="center">
				<u-col span="4">
					<view class="demo-layout bg-purple">
						<view class="wrap_title">
							全球累计接种
						</view>
						<view class="wrap_content" style="color: #178B50;">
							<view class="wrap_number">
								{{dataList.world.total_vaccinations| num1filter}}
							</view>
							<view class="wrap_word">
								亿剂
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-light">
						<view class="wrap_title">
							全球较上日新增
						</view>
						<view class="wrap_content" style="color: #E57631;">
							<view class="wrap_number">
								{{dataList.world.new_vaccinations | num2filter}}
							</view>
							<view class="wrap_word">
								万剂
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-dark">
						<view class="wrap_title">
							全球每百人接种
						</view>
						<view class="wrap_content" style="color: #4E5A65;">
							<view class="wrap_number">
								{{dataList.world.total_vaccinations_per_hundred}}
							</view>
							<view class="wrap_word">
								剂
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="10" justify="center">
				<u-col span="4">
					<view class="demo-layout bg-purple">
						<view class="wrap_title">
							中国累计接种
						</view>
						<view class="wrap_content" style="color: #178B50;">
							<view class="wrap_number">
								{{dataList.china.total_vaccinations| num1filter}}
							</view>
							<view class="wrap_word">
								亿剂
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-light">
						<view class="wrap_title">
							中国较昨日新增
						</view>
						<view class="wrap_content" style="color: #E57631;">
							<view class="wrap_number" >
								{{dataList.china.new_vaccinations | num2filter}}
							</view>
							<view class="wrap_word">
								万剂
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-dark">
						<view class="wrap_title">
							中国每百人接种
						</view>
						<view class="wrap_content" style="color: #4E5A65;">
							<view class="wrap_number">
								{{dataList.china.total_vaccinations_per_hundred}}
							</view>
							<view class="wrap_word">
								剂
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="button_wrap">
			<view class="button_wrap_content" @click="handleButtonWrap()" style="background-image: url(https://mat1.gtimg.com/news/worldvaccine/orderbg.png);">
				<view class="button_title">
					附近疫苗预约
				</view>
				<view class="button_content">
					一键查询 电话预约
				</view>
			</view>
			<view class="button_wrap_content" @click="handleButtonWrap2()" style="background-image:url(https://mat1.gtimg.com/news/worldvaccine/devbg.png) ;">
				<view class="button_title">
					疫苗研发进展
				</view>
				<view class="button_content">
					各国疫苗对比
				</view>
			</view>
		</view>
		<view class="echarts_title">
			中国疫苗接种趋势
		</view>
		<echarts :option="option1" style="height: 400rpx; margin-top: 20rpx;"></echarts>
		<view class="echarts_title" style="margin-top: 60rpx; position: relative; top: -30rpx;">
			全国各地疫苗接种趋势
		</view>
		<echarts :option="option2" style="height: 400rpx; margin-top: 20rpx;"></echarts>
		<view class="grid_title">
			全球各国(地区)新冠肺炎疫苗接种情况
		</view>
		<view class="grid">
			<u-row gutter="10" justify="center">
						<u-col span="2">
							<view class="demo-layout col_title" style="height: 60rpx;">
								<view>
									国家地区
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout col_title"style="height: 60rpx;">
								<view class="">
									累计接种
								</view>
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout col_title" style="height: 60rpx;">
								<view class="">
									每百人
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout col_title" style="height: 60rpx;">
								<view class="">
									疫苗研制单位
								</view>
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout col_title"style="height: 60rpx;">
								<view class="">
									更新时间
								</view>
							</view>
						</u-col>
			</u-row>
			<u-row gutter="10" justify="center" v-for="item in vaccineSituationDataList" :key="item.country">
						<u-col span="2">
							<view class="demo-layout col_content" style=" font-weight: 600;">
								<view>
									{{item.country}}
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout col_content"style="">
								<view class="">
									{{item.total_vaccinations | num3filter}}
								</view>
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout col_content" style="">
								<view class="">
									{{item.total_vaccinations_per_hundred}}
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout col_content" style="">
								<view class="">
									{{item.vaccinations}}
								</view>
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout col_content" style="">
								<view class="">
									{{item.date | datafilter}}
								</view>
							</view>
						</u-col>
			</u-row>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</scroll-view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'
	export default {
		components:{
			echarts
		},
		filters:{
			num1filter(data){
				data = data + ''
				data = (data/100000000).toFixed(1)
				return data
			},
			num2filter(data){
				data = data + ''
				data = (data/10000).toFixed(1)
				return data
			},
			num3filter(data){
				data = data + ''
				if(data/100000000 >= 1){
					return  (data/100000000).toFixed(1) + '亿剂'
				}else if(data/100000000 < 1 && data/10000 > 1){
					return (data/10000).toFixed(1) + '万剂'
				}else{
					return data
				}
			},
			datafilter(data){
				return data.slice(5)
			}
		},
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
		},
		data() {
			return {
				scrollTop:0,
				show:false,
				vaccineSituationDataList:[],
				dataList:{
					china:{
						
					},
					world:{
						
					}
				},
				option1: {
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [],
						axisLine: {
						            lineStyle:{
						                color:'#ACACAC',//x轴的颜色
						                width:1,//轴线的宽度
										fontSize:2,
						            }
						        },
						axisLabel: {
						interval:0,
						rotate:40,
						textStyle:{
							fontSize:8
						}
						}
					},
					yAxis: {
						type: 'value',
						axisLabel:{
							formatter:'{value}(亿)',
							textStyle:{
								fontSize:8,
								color:'#000'
							}
						},
						axisLine: {
						            lineStyle:{
						                color:'#ACACAC',//x轴的颜色
						                width:1,//轴线的宽度
						            }
						        },
						
					},
					series: [
						{
							name: '累计注射疫苗数量',
							type: 'line',
							stack: '总量',
							data: [],
							itemStyle: {
						         normal: {
						           color: "#FE7B7C",//折线点的颜色
						           lineStyle: {
						           color: "#FE7B7C"//折线的颜色
						          }
						        }
							}
						}
					]
				},
				option2:{
					
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['中国','印度','美国','欧盟','英国','巴西','德国','意大利']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [],
						axisLine: {
						            lineStyle:{
						                color:'#ACACAC',//x轴的颜色
						                width:1,//轴线的宽度
										fontSize:2,
						            }
						        },
						axisLabel: {
						interval:0,
						rotate:40,
						textStyle:{
							fontSize:8
						}
						}
					},
					yAxis: {
						type: 'value',
						axisLabel:{
							formatter:'{value}(亿)',
							textStyle:{
								fontSize:8,
								color:'#000'
							}
						},
						axisLine: {
						            lineStyle:{
						                color:'#ACACAC',//x轴的颜色
						                width:1,//轴线的宽度
						            }
						        },
					},
					series: [
						{
							name: '中国',
							type: 'line',
							data: []
						},
						{
							name: '美国',
							type: 'line',
							
							data: []
						},
						{
							name: '印度',
							type: 'line',
							
							data: []
						},
						{
							name: '欧盟',
							type: 'line',
							
							data: []
						},
						{
							name: '英国',
							type: 'line',
							
							data: []
						},{
							name: '巴西',
							type: 'line',
							
							data: []
						},{
							name: '意大利',
							type: 'line',
							
							data: []
						},{
							name: '德国',
							type: 'line',
							
							data: []
						}
					]
				}
					
			}	
		},
		onLoad(){
			uni.showLoading({
				title:'加载中'
			})
			this.getData()
			this.getEchartDataChina()
			this.getEchartDataWorld()
			this.getVaccineSituationData()
			uni.hideLoading()
		},
		methods:{
			handleButtonWrap2(){
				uni.navigateTo({
					url:'/pages/yimiaojinzhan/yimiaojinzhan'
				})
			},
			handleButtonWrap(){
				
				uni.navigateTo({
					url:"/pages/yimiaoyuyue/yimiaoyuyue"
				})
			},
			handleExplain(){
				this.show = true
			},
			getData(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTopData'
				}).then(res=>{
					this.dataList.china = res[1].data.data.VaccineTopData.中国
					this.dataList.world = res[1].data.data.VaccineTopData.全球
				})
			},
			getEchartDataChina(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=ChinaVaccineTrendData'
				}).then(res=>{
		
					res = res[1].data.data.ChinaVaccineTrendData
					for(var i=4;i<res.length;i+=5){
						if(res[i].total_vaccinations <= 0 ){
							res[i].total_vaccinations = 0;
						}
						var total = res[i].total_vaccinations/100000000
						this.option1.xAxis.data.push(res[i].date)
						this.option1.series[0].data.push(total)
						
					}
					
				})
			},
			getEchartDataWorld(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTrendData'
				}).then(res=>{
					res = res[1].data.data.VaccineTrendData.totalTrend;
					for(var i=4;i<res.中国.length;i+=5){
						if(res.中国[i].total_vaccinations<=0){
							res.中国[i].total_vaccinations = 0
						}
						this.option2.series[0].data.push(res.中国[i].total_vaccinations/100000000)
						this.option2.xAxis.data.push(res.中国[i].date)
					}
					// for(var i=4;i<res.俄罗斯.length;i+=5){
					// 	if(res.俄罗斯[i].total_vaccinations<=0){
					// 		res.俄罗斯[i].total_vaccinations = 0
					// 	}
					// 	this.option2.series[1].data.push(res.俄罗斯[i].total_vaccinations/100000000)
					// }
					for(var i=4;i<res.美国.length;i+=5){
						if(res.美国[i].total_vaccinations<=0){
							res.美国[i].total_vaccinations = 0
						}
						this.option2.series[1].data.push(res.美国[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.印度.length;i+=5){
						if(res.印度[i].total_vaccinations<=0){
							res.印度[i].total_vaccinations = 0
						}
						this.option2.series[2].data.push(res.印度[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.欧盟.length;i+=5){
						if(res.欧盟[i].total_vaccinations<=0){
							res.欧盟[i].total_vaccinations = 0
						}
						this.option2.series[3].data.push(res.欧盟[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.英国.length;i+=5){
						if(res.英国[i].total_vaccinations<=0){
							res.英国[i].total_vaccinations = 0
						}
						this.option2.series[4].data.push(res.英国[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.巴西.length;i+=5){
						if(res.巴西[i].total_vaccinations<=0){
							res.巴西[i].total_vaccinations = 0
						}
						this.option2.series[5].data.push(res.巴西[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.意大利.length;i+=5){
						if(res.意大利[i].total_vaccinations<=0){
							res.意大利[i].total_vaccinations = 0
						}
						this.option2.series[6].data.push(res.意大利[i].total_vaccinations/100000000)
					}
					for(var i=4;i<res.德国.length;i+=5){
						if(res.德国[i].total_vaccinations<=0){
							res.德国[i].total_vaccinations = 0
						}
						this.option2.series[7].data.push(res.德国[i].total_vaccinations/100000000)
					}
					// for(var i=4;i<res.土耳其.length;i+=5){
					// 	if(res.土耳其[i].total_vaccinations<=0){
					// 		res.土耳其[i].total_vaccinations = 0
					// 	}
					// 	this.option2.series[9].data.push(res.土耳其[i].total_vaccinations/100000000)
					// }
					
					
				})
			},
			//疫苗公司数据
			getVaccineSituationData(){
				uni.request({
					url:"https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineSituationData"
				}).then(res=>{
					this.vaccineSituationDataList = res[1].data.data.VaccineSituationData
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.col_content{
		background-color: #F6FAFF;
		color: #222;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.col_title{
		background-color: #EEF5FF;
		color:#2869ee;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.grid_title{
		font-size: 32rpx;
		color: #222;
		font-weight: 600;
		padding-left: 40rpx ;
		margin:40rpx 0;
	}
	.echarts_title{
		font-size: 30rpx;
		font-weight: 600;
		padding-left: 40rpx;
		position:relative ;
		top:80rpx
	}
	.button_wrap{
		height: 120rpx;
		display: flex;
		justify-content: center;
		.button_wrap_content{
			height: 100%;
			width: 328rpx;
			background-size: 100%;
			padding-top: 20rpx;
			margin: 20rpx 20rpx;
			padding-left: 40rpx;
			border-radius: 20rpx;
			.button_title{
				width: 100%;
				color: #222;
				font-size: 28rpx;
				font-weight: 600;
			}
			.button_content{
				font-size: 24rpx;
				color: #777;
				
			}
		}
			
		
	}
	.wrap_content{
		display: flex;
		justify-content: center;
		font-weight: 600;
		.wrap_number{
			font-size: 40rpx;
		}
		.wrap_word{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			padding-top: 10rpx;
		}
	}
	.wrap_title{
		font-size: 24rpx;
		color: #222222;
		height: 20rpx;
		width: 100%;
		text-align: center;
		margin-bottom: 35rpx ;
		position: relative;
		top: 20rpx;
	}
	.modal_content{
		margin: 40rpx 40rpx;
		
		font-size: 24rpx;
	}
	.head{
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.head_left{
			margin-left: 40rpx;
			font-weight: 800;
			font-size: 32rpx;
		}
		.head_right{
			margin-right: 40rpx;
			font-size: 24rpx;
			color: #7c7c7c;
			margin-top: 10rpx;
		}
	}
.wrap {
		padding:0 24rpx;
	}

	.u-row {
		margin: 10rpx 0;
	}

	.demo-layout {
		height: 128rpx;
		border-radius: 8rpx;
		// display: flex;
		// justify-content: center;
	}

	.bg-purple {
		background: #F1F8F4;
	}

	.bg-purple-light {
		background: #FFFAF7;
	}

	.bg-purple-dark {
		background: #F3F6F8;
	}
</style>
